<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>批量导入</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../../../component/elementUI/index.css">
    <link rel="stylesheet" href="../../../style/wangeditor.css">
    <link rel="stylesheet" href="../../../style/index.css">
    <style>
        .cont-scroll-wrap {
            width: 148px;
            flex: auto;
            height: 0;
            overflow-y: auto;
        }
        sup{
            z-index: 1000;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <el-form :inline="true">
            <el-form-item>
                <el-button :disabled="loading" size="small" type="danger" @click="window.history.back()">返回</el-button>
            </el-form-item>
            <el-form-item>
                <el-upload class="upload-demo" ref="upload" action="" :on-change="handleChange" :file-list="fileList"
                    :show-file-list="false" :auto-upload="false">
                    <el-button :disabled="loading" slot="trigger" size="small" type="primary">选取文件</el-button>
                    <el-button style="margin-left: 10px;" :loading="loading" size="small" type="success"
                        @click="submitUpload(0)">上传文件</el-button>
                    <el-button :disabled="loading" style="margin-left: 10px;" size="small" type="danger"
                        @click="handleClean">清空</el-button>
                    <el-badge :value="success" style="margin-left: 10px;" class="item" type="success">
                        <el-button :type="filter=='1'?'success':''" size="small" @click="handleTab('1')">成功</el-button>
                    </el-badge>
                    <el-badge style="margin-left: 10px;" :value="error" class="item">
                        <el-button :type="filter=='2'?'danger':''" size="small" @click="handleTab('2')">失败</el-button>
                    </el-badge>
                </el-upload>
            </el-form-item>
            <el-form-item>
                <el-date-picker :disabled="loading" v-model.trim="Start_Date" type="date" placeholder="请选择开始时间"
                    value-format="yyyy-MM-dd"></el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-date-picker :disabled="loading" v-model.trim="End_Date" type="date" placeholder="请选择结束时间"
                    value-format="yyyy-MM-dd"></el-date-picker>
            </el-form-item>
        </el-form>
        <el-table :data="Data.slice((form.page-1)*form.limit,form.page*form.limit)" stripe border
            style="width: 100%" height="calc(100vh - 180px)" :expand-all="true">
            <el-table-column type="index" width="50" align="center" label="序号"></el-table-column>
            <el-table-column min-width="120" label="开始时间" align="center" prop="Start_Date">
                <template v-slot="{row}">
                    <span :style="{color:Start_Date?'':'red'}">{{Start_Date?Start_Date:'请选择开始时间'}}</span>
                </template>
            </el-table-column>
            <el-table-column min-width="120" label="结束时间" align="center" prop="End_Date">
                <template v-slot="{row}">
                    <span>{{End_Date?End_Date:'长期'}}</span>
                </template>
            </el-table-column>
            <el-table-column label="供应商品内码" min-width="150"  show-overflow-tooltip align="center" prop="Supplier_Article_SerialNumber">
                <template v-slot="{row}">
                    <span>{{row.Supplier_Article_SerialNumber}}</span>
                </template>
            </el-table-column>
            <el-table-column label="商品名称" min-width="150"  align="center" show-overflow-tooltip  prop="Article_Name">
                <template v-slot="{row}">
                    <span>{{row.Article_Name}}</span>
                </template>
            </el-table-column>
            <el-table-column label="商品规格" min-width="150" align="center" prop="Specifications_Name">
                <template v-slot="{row}">
                    <span>{{row.Specifications_Name}}</span>
                </template>
            </el-table-column>
            <el-table-column label="商品图片" width="140" align="center" prop="Specifications_Name">
                <template v-slot="{row}">
                    <el-image fit="contain" :src="BASE_IMG + row.Picture_URL" style="width:100px;height: 100px;"></el-image>
                </template>
            </el-table-column>
            <el-table-column label="采购单价" align="center" min-width="100" prop="Purchase_Unit_Price">
                <template v-slot="{row}">
                    <span>{{row.Purchase_Unit_Price}}</span>
                </template>
            </el-table-column>
            <el-table-column label="状态" align="center" width="100">
                <template v-slot="{row}">
                    <el-tag :type="row.isStatus=='1'?'success':row.isStatus=='2'?'danger':''">{{row.isStatus=='1'?'成功':row.isStatus=='2'?'失败':'待导入'}}</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="原因说明"  show-overflow-tooltip align="center" width="150">
                <template v-slot="{row}">
                    {{row.Cause}}
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center" width="180">
                <template v-slot="{row,$index}">
                    <el-tooltip class="item" effect="dark" content="当前暂时无法修改，只能删除或重新上传模板" placement="top-start">
                        <el-button size="small" disabled :type="row.isEdit?'success':'info'" @click="handleEdit(row)">
                            {{row.isEdit?'保存':'修改'}}
                        </el-button>
                    </el-tooltip>
                    <el-button size="small" :disabled="loading" type="danger"
                        @click="handleRemove($index)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="form.page" :page-sizes="[15, 30 , 60 ,100, 200, 300, 400]" :page-size="form.limit"
            layout="total, sizes, prev, pager, next, jumper" :total="tableData.length">
        </el-pagination>
    </div>
    <script type="text/javascript" src="../../../utils/wangeditor.js"></script>
    <script type="text/javascript" src="../../../utils/jquery.min.js"></script>
    <script type="text/javascript" src="../../../utils/jquery.cookie.js"></script>
    <script type="text/javascript" src="../../../utils/vue.min.js"></script>
    <script type="text/javascript" src="../../../utils/vuex.min.js"></script>
    <script type="text/javascript" src="../../../component/elementUI/index.js"></script>
    <script type="text/javascript" src="../../../component/component.js"></script>
    <script type="text/javascript" src="../../../config/config.js"></script>
    <script type="text/javascript" src="../../../utils/FileSaver.min.js"></script>
    <script type="text/javascript" src="../../../utils/FileSaver.js"></script>
    <script type="text/javascript" src="../../../utils/xlsx.full.min.js"></script>
    <script type="text/javascript" src="../../../utils/xlsx.core.min.js"></script>
    <script type="text/javascript" src="../../../utils/compressor.js"></script>
    <script type="text/javascript" src="../../../utils/ID_Validity.js"></script>
    <script type="text/javascript" src="../../../utils/utils.js"></script>
    <script type="text/javascript" src="js/import.js"></script>
</body>

</html>